<template>
  <view class="cart-page">
    <!-- 未登录 -->
    <view v-if="!isLogin" class="cart-empty">
      <image src="/static/images/shopping/购物车点击前.png" class="empty-img" />
      <view class="empty-tip">为自己挑点儿喜欢的东西</view>
      <view class="btn-group">
        <button class="cart-login-btn" @click="goToActivity">优惠活动</button>
        <button class="cart-login-btn primary" @click="goToLogin">立即登录</button>
        <button class="cart-login-btn" @click="refreshLoginStatus" style="margin-top: 20rpx;">刷新登录状态</button>
      </view>
    </view>
    <!-- 已登录 -->
    <view v-else>
      <view v-if="isCartEmpty" class="empty-cart">
        <image src="/static/images/shopping/购物车点击前.png" class="empty-img" />
        <view class="empty-tip">购物车空空如也~</view>
        <button class="go-shopping-btn" @click="goShopping">去逛逛</button>
      </view>
      <view v-else class="cart-content">
        <view v-for="group in cartList" :key="group.shopId || group.groupName" class="cart-group-card">
          <!-- 分组头部 -->
          <view class="group-header">
            <text class="group-title">{{ group.shopName || (group.groupName !== '默认分组' ? group.groupName : '') }}</text>
            <text class="group-tag" v-if="group.shopTag">{{ group.shopTag }}</text>
            <text class="group-activity" v-if="group.shopActivity">{{ group.shopActivity }}</text>
            <text class="group-arrow">›</text>
          </view>
          <view class="group-items">
            <view v-for="item in group.items" :key="item.id" class="cart-item-wrapper">
              <view class="cart-item-label" @click="toggleCustomChecked(group, item)">
                  <view class="custom-checkbox" :class="{ checked: item.checked === 1 || item.checked === true }">
                    <svg v-if="item.checked === 1 || item.checked === true" class="checkbox-svg" viewBox="0 0 24 24" width="32" height="32">
                      <rect x="2" y="2" width="20" height="20" rx="6" fill="#ff5000" />
                      <polyline points="6,13 11,18 18,7" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    <svg v-else class="checkbox-svg" viewBox="0 0 24 24" width="32" height="32">
                      <rect x="2" y="2" width="20" height="20" rx="6" fill="#fff" stroke="#ddd" stroke-width="2.5" />
                    </svg>
                  </view>
                  <view class="cart-item-card">
                    <!-- 商品内容 -->
                    <image :src="item.productImage || '/static/images/shopping/购物车点击前.png'" class="cart-img" mode="aspectFill" />
                    <view class="cart-info">
                      <view class="cart-title">{{ item.productName || '未知商品' }}</view>
                      <view class="cart-sku" v-if="item.skuText">{{ item.skuText }}</view>
                      <view class="cart-tags">
                        <text v-for="tag in item.activityTags" :key="tag" class="cart-activity">{{ tag }}</text>
                        <text v-if="item.coupon" class="cart-coupon">{{ item.coupon }}</text>
                      </view>
                      <view class="cart-meta">
                        <text v-if="item.comment" class="cart-comment">{{ item.comment }}</text>
                        <text v-if="item.limitText" class="cart-limit">{{ item.limitText }}</text>
                      </view>
                      <view class="cart-price-row">
                        <text class="cart-price">￥{{ item.price || item.salePrice }}</text>
                        <text class="cart-origin-price" v-if="item.originPrice && item.originPrice > (item.price || item.salePrice)">￥{{ item.originPrice }}</text>
                      </view>
                      <view class="cart-quantity-row">
                        <view class="quantity-box">
                        <button class="quantity-btn minus" @click.stop="changeQuantity(item, item.quantity - 1)" :disabled="item.quantity <= 1 || loading">-</button>
                          <text class="quantity-num">{{ item.quantity }}</text>
                        <button class="quantity-btn plus" @click.stop="changeQuantity(item, item.quantity + 1)" :disabled="loading">+</button>
                        </view>
                      </view>
                    </view>
                  </view>
              </view>
              <!-- 删除按钮 -->
              <view class="delete-btn" @click="deleteCart([item.id])">
                <text class="delete-text">删除</text>
              </view>
            </view>
          </view>
        </view>
        <!-- 底部结算栏 -->
        <view class="cart-bottom-bar-simple">
          <view class="cart-total">
            合计：<text class="cart-total-price">￥{{ totalPrice }}</text>
          </view>
          <button class="cart-btn batch-delete-btn" @click="batchDelete">批量删除</button>
          <button class="cart-btn clear-cart-btn" @click="clearCart">清空</button>
          <button class="cart-btn checkout-btn" @click="checkout" :disabled="selectedCount === 0">结算({{ selectedCount }})</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { listCart, addCart, updateCart, deleteCart, clearCart, updateChecked } from '@/api/cart'
import { recommendProducts } from '@/api/goods'

export default {
  data() {
    return {
      isLogin: false,
      userId: null,
      cartList: [],
      isAllChecked: false,
      guessList: [],
      loading: false // 新增loading状态
    }
  },
  computed: {
    // 购物车是否为空（所有分组items都为空）
    isCartEmpty() {
      return this.cartList.length === 0 || this.cartList.every(group => !group.items || group.items.length === 0);
    },
    // 计算总价
    totalPrice() {
      let total = 0;
      this.cartList.forEach(group => {
        group.items.forEach(item => {
          if (item.checked === 1 || item.checked === true) {
            total += (Number(item.price) || 0) * (Number(item.quantity) || 1);
          }
        });
      });
      return total.toFixed(2);
    },
    // 计算选中商品数量
    selectedCount() {
      let count = 0;
      this.cartList.forEach(group => {
        group.items.forEach(item => {
          if (item.checked === 1 || item.checked === true) count++;
        });
      });
      return count;
    }
  },
  onShow() {
    this.checkLoginStatus();
    this.getCartList();
    // 检查重复id并自动过滤
    setTimeout(() => {
      const allItems = this.cartList.flatMap(g => g.items);
      const seen = new Set();
      const filteredGroups = this.cartList.map(group => {
        const uniqueItems = group.items.filter(item => {
          if (seen.has(item.id)) return false;
          seen.add(item.id);
          return true;
        });
        return { ...group, items: uniqueItems };
      });
      const allIds = allItems.map(i => i.id);
      const dup = allIds.filter((id, idx, arr) => arr.indexOf(id) !== idx);
      if (dup.length) {
        console.warn('检测到重复id，已自动过滤:', dup);
        this.cartList = filteredGroups;
      }
    }, 500);
  },
  onReachBottom() {
    // 修复报错：如无猜你喜欢分页功能，直接注释掉
    // if (!this.noMore && !this.loading) {
    //   this.pageNum++;
    //   this.loadGuessList(true);
    // }
  },
  methods: {
    // 检查登录状态
    checkLoginStatus() {
      const userInfo = this.$store.state.user;
      const token = uni.getStorageSync('token') || uni.getStorageSync('App-Token');
      
      console.log('=== 检查登录状态 ===');
      console.log('Store状态:', this.$store.state);
      console.log('用户信息:', userInfo);
      console.log('Token:', token);
      
      if (userInfo && userInfo.id && token) {
        this.isLogin = true;
        this.userId = userInfo.id;
        console.log('登录状态: 已登录, 用户ID:', this.userId);
      } else {
        this.isLogin = false;
        this.userId = null;
        console.log('登录状态: 未登录');
        console.log('原因分析:');
        console.log('- userInfo存在:', !!userInfo);
        console.log('- userInfo.id存在:', !!(userInfo && userInfo.id));
        console.log('- token存在:', !!token);
      }
    },
    
    goToLogin() {
      uni.navigateTo({ url: '/pages/login' });
    },
    
    // 刷新登录状态
    refreshLoginStatus() {
      console.log('手动刷新登录状态');
      this.checkLoginStatus();
      if (this.isLogin) {
        this.getCartList();
        uni.showToast({
          title: '登录状态已刷新',
          icon: 'success'
        });
      } else {
        uni.showToast({
          title: '未检测到登录状态',
          icon: 'none'
        });
      }
    },
    goToActivity() {
      uni.navigateTo({ url: '/pages/activity' });
    },
    goShopping() {
      uni.switchTab({ url: '/pages/category/index' });
    },
    goToCategory() {
      uni.switchTab({ url: '/pages/category/index' });
    },
    goToDetail(item) {
      uni.navigateTo({ url: `/pages/product/detail?id=${item.id}` });
    },
    // 查询购物车，适配分组和空状态
    getCartList() {
      if (!this.isLogin || !this.userId) {
        this.cartList = [];
        this.loading = false;
        return;
      }
      
      this.loading = true;
      listCart({ userId: this.userId }).then(res => {
        let rows = res.data && res.data.rows ? res.data.rows : [];
        // 自动补充高仿京东UI字段，并将id、productId、userId转为int类型
        rows = rows.map((item, idx) => ({
          ...item,
          id: item.id ? parseInt(item.id) : idx + 1,
          productId: item.productId ? parseInt(item.productId) : 1001,
          userId: item.userId ? parseInt(item.userId) : 1001,
          productImage: item.productImage || 'https://img14.360buyimg.com/n7/jfs/t1/123456/40/12345/1234567890.jpg',
          activityTags: item.activityTags || (idx % 2 === 0 ? ['限时抢购'] : ['拼团']),
          coupon: item.coupon || (idx % 2 === 0 ? '满100减10' : ''),
          comment: item.comment || (idx % 2 === 0 ? '152单0差评' : '410人好评'),
          limitText: item.limitText || (idx % 2 === 0 ? '限时拼满50返5' : '限购2件'),
          skuText: item.skuText || '请选择款式',
          price: item.price ? parseInt(item.price) : (item.salePrice ? parseInt(item.salePrice) : 9),
          originPrice: item.originPrice ? parseInt(item.originPrice) : (item.price ? parseInt(item.price) + 10 : 19),
          quantity: item.quantity ? parseInt(item.quantity) : 1
        }));
        // 判断是否已分组（有groupName字段），否则前端分组
        if (rows.length > 0 && !rows[0].items) {
          // 假设每个商品有 groupName 字段，没有就归为“默认分组”
          const groupMap = {};
          rows.forEach(item => {
            const groupName = item.groupName || item.shopName || '默认分组';
            if (!groupMap[groupName]) {
              groupMap[groupName] = {
                groupName,
                groupTag: item.groupTag || '',
                coupon: item.coupon || false,
                items: []
              };
            }
            groupMap[groupName].items.push(item);
          });
          this.cartList = Object.values(groupMap);
        } else {
          this.cartList = rows;
        }
        // 唯一性过滤
        const seen = new Set();
        this.cartList = this.cartList.map(group => {
          const uniqueItems = group.items.filter(item => {
            if (seen.has(item.id)) return false;
            seen.add(item.id);
            return true;
          });
          return { ...group, items: uniqueItems };
        });
        // 判断全选
        this.isAllChecked = this.cartList.length > 0 && this.cartList.every(group => group.items && group.items.length > 0 && group.items.every(i => i.checked === 1));
        // 调试输出cartList结构
        console.log('cartList:', this.cartList);
      }).catch(() => {
        uni.showToast({ title: '购物车加载失败', icon: 'none' });
        this.cartList = [];
      }).finally(() => {
        this.loading = false;
      });
    },
    // 添加商品到购物车
    handleAddCart(item) {
      if (this.loading) return;
      this.loading = true;
      addCart({ userId: this.userId, productId: item.id, quantity: 1, checked: 1 }).then(res => {
        uni.showToast({ title: '添加成功', icon: 'success' });
        this.getCartList();
      }).catch(() => {
        uni.showToast({ title: '添加失败', icon: 'none' });
        this.loading = false;
      });
    },
    // 修改商品数量
    changeQuantity(item, newQuantity) {
      if (newQuantity < 1 || this.loading) return;
      this.loading = true;
      updateCart({ cartId: item.id, quantity: newQuantity }).then(res => {
        this.getCartList();
      }).catch(() => {
        uni.showToast({ title: '修改失败', icon: 'none' });
        this.loading = false;
      });
    },
    // 删除购物车商品
    deleteCart(cartIds) {
      if (this.loading) return;
      uni.showModal({
        title: '确认删除',
        content: '确定要删除选中的商品吗？',
        success: (res) => {
          if (res.confirm) {
            this.loading = true;
            deleteCart({ cartIds }).then(res => {
              uni.showToast({ title: '删除成功', icon: 'success' });
              this.getCartList();
            }).catch(() => {
              uni.showToast({ title: '删除失败', icon: 'none' });
              this.loading = false;
            });
          }
        }
      });
    },
    // 批量删除选中
    batchDelete() {
      if (this.loading) return;
      // 获取所有选中的商品id（遍历所有分组的items）
      const ids = [];
      this.cartList.forEach(group => {
        group.items.forEach(item => {
          if (item.checked === 1 || item.checked === true) {
            ids.push(item.id);
          }
        });
      });
      if (ids.length === 0) {
        uni.showToast({ title: '请选择要删除的商品', icon: 'none' });
        return;
      }
      this.deleteCart(ids);
    },
    // 清空购物车
    clearCart() {
      if (this.loading) return;
      uni.showModal({
        title: '确认清空',
        content: '确定要清空购物车吗？',
        success: (res) => {
          if (res.confirm) {
            this.loading = true;
            clearCart({ userId: this.userId }).then(res => {
              uni.showToast({ title: '已清空', icon: 'success' });
              this.getCartList();
            }).catch(() => {
              uni.showToast({ title: '清空失败', icon: 'none' });
              this.loading = false;
            });
          }
        }
      });
    },
    // 单个选中/取消
    toggleChecked(e, group, item) {
      if (this.loading) return;
      const checked = e.detail.value.length > 0 ? 1 : 0;
      // 本地立即更新
      item.checked = checked;
      this.cartList = [...this.cartList]; // 强制刷新
      console.log('toggleChecked:', item.id, 'checked:', checked, this.cartList);
      this.loading = true;
      updateChecked({ cartIds: [item.id], checked }).then(res => {
        this.getCartList();
      }).catch(() => {
        uni.showToast({ title: '操作失败', icon: 'none' });
        this.loading = false;
      });
    },
    // 全选/取消全选
    toggleAllChecked(e) {
      if (this.loading) return;
      // e.detail.value.length > 0 代表全选，否则全不选
      const checked = e.detail.value.length > 0 ? 1 : 0;
      const ids = this.cartList.map(i => i.id);
      this.loading = true;
      updateChecked({ cartIds: ids, checked }).then(res => {
        this.getCartList();
      }).catch(() => {
        uni.showToast({ title: '操作失败', icon: 'none' });
        this.loading = false;
      });
    },
    // 批量全选/取消全选
    toggleGroupAllChecked(e, group) {
      if (this.loading) return;
      const checked = e.detail.value.length > 0 ? 1 : 0;
      const ids = group.items.map(i => i.id);
      this.loading = true;
      updateChecked({ cartIds: ids, checked }).then(res => {
        this.getCartList();
      }).catch(() => {
        uni.showToast({ title: '操作失败', icon: 'none' });
        this.loading = false;
      });
    },
    // 结算
    checkout() {
      if (this.selectedCount === 0) {
        uni.showToast({ title: '请选择要结算的商品', icon: 'none' });
        return;
      }
      // 获取选中的商品
      const selectedItems = [];
      this.cartList.forEach(group => {
        group.items.forEach(item => {
          if (item.checked === 1 || item.checked === true) {
            selectedItems.push(item);
          }
        });
      });
      // 跳转到结算页，传递选中商品（使用事件通道或本地存储）
      uni.navigateTo({
        url: '/pages/order/submit',
        success: function(res) {
          // 通过事件通道传递数据
          res.eventChannel.emit('acceptGoodsList', { goodsList: selectedItems });
        }
      });
    },
    // 猜你喜欢
    getGuessList() {
      recommendProducts({ size: 4 }).then(res => {
        this.guessList = (res.data || []).map(item => ({
          id: item.id,
          name: item.goodsName,
          price: item.price,
          img: item.imageUrl || '/static/images/shopping/购物车点击前.png'
        }));
      });
    },
    isGroupAllChecked(group) {
      return group.items && group.items.length > 0 && group.items.every(i => i.checked === 1);
    },
    groupCheckedChange(e, group) {
      // e.detail.value 是当前被选中的id数组
      const checkedIds = e.detail.value.map(id => parseInt(id));
      group.items.forEach(item => {
        item.checked = checkedIds.includes(item.id) ? 1 : 0;
      });
      this.cartList = [...this.cartList];
      // 可选：批量同步到后端
      // updateChecked({ cartIds: checkedIds, checked: 1 });
    },
    toggleCustomChecked(group, item) {
      item.checked = item.checked === 1 || item.checked === true ? 0 : 1;
      this.cartList = [...this.cartList];
      // 同步到后端
      updateChecked({ cartIds: [item.id], checked: item.checked }).then(res => {
        // 可选：成功后刷新购物车
        // this.getCartList();
      });
    }
  }
}
</script>

<style >
// @import url('//at.alicdn.com/t/font_1234567_xxxxxxx.css'); /* 替换为你的iconfont项目地址 */
.cart-page {
  background: #f6f7fb;
  min-height: 100vh;
  padding-bottom: 120rpx;
}
.cart-content {
  padding: 0 16rpx 180rpx 16rpx; /* 底部加大padding，避免内容被底部栏和TabBar遮挡 */
}
.cart-group-card {
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 6rpx 24rpx rgba(0,0,0,0.08);
  margin-bottom: 32rpx;
  overflow: hidden;
}
.group-header {
  display: flex;
  align-items: center;
  padding: 22rpx 22rpx 0 22rpx;
  border-bottom: 1rpx solid #f5f5f5;
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
  background: #fafbfc;
}
.group-title { margin-left: 12rpx; font-size: 32rpx; font-weight: bold; }
.group-tag, .group-activity {
  margin-left: 16rpx;
  font-size: 22rpx;
  padding: 2rpx 10rpx;
  border-radius: 8rpx;
}
.group-tag { color: #ff9000; background: #fff7e6; }
.group-activity { color: #ff4d4f; background: #fff0f0; }
.group-arrow { margin-left: auto; color: #bbb; font-size: 36rpx; font-weight: normal; }
.group-items { padding: 0 12rpx; }

.cart-item-card {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-radius: 14rpx;
  margin: 18rpx 0 0 0;
  padding: 18rpx 10rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  position: relative;
  transition: box-shadow 0.2s;
}
.cart-item-card:not(:last-child) {
  margin-bottom: 12rpx;
}
.cart-item-card:hover {
  box-shadow: 0 6rpx 24rpx rgba(255,144,0,0.10);
}
.cart-checkbox {
  width: 44rpx !important;
  height: 44rpx !important;
  min-width: 44rpx;
  min-height: 44rpx;
  margin-right: 18rpx;
  margin-top: 30rpx;
  transform: scale(1.5);
  border-radius: 8rpx;
  background: #fff;
  border: 2rpx solid #ddd;
  box-shadow: 0 2rpx 8rpx rgba(255,80,0,0.08);
  accent-color: #ff5000; /* 支持的端主色高亮 */
}
/* H5/微信小程序选中态美化 */
.cart-checkbox:checked {
  border-color: #ff5000 !important;
  background: #ff5000 !important;
  box-shadow: 0 0 0 6rpx #ff500033;
}
/* 提高点击区域 */
.cart-item-label {
  cursor: pointer;
  padding-top: 6rpx;
  padding-bottom: 6rpx;
}
.cart-img {
  width: 110rpx;
  height: 110rpx;
  border-radius: 12rpx;
  background: #f2f2f2;
  margin-right: 18rpx;
  object-fit: cover;
}
.cart-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 110rpx;
}
.cart-title {
  font-size: 30rpx;
  color: #222;
  font-weight: 700;
  margin-bottom: 8rpx;
  line-height: 1.3;
  word-break: break-all;
}
.cart-sku {
  font-size: 24rpx;
  color: #bbb;
  margin-bottom: 6rpx;
}
.cart-tags {
  display: flex;
  gap: 8rpx;
  margin-bottom: 8rpx;
}
.cart-activity {
  color: #ff4d4f;
  background: #fff0f0;
  font-size: 20rpx;
  border-radius: 6rpx;
  padding: 2rpx 8rpx;
}
.cart-coupon {
  color: #ff9000;
  background: #fff7e6;
  font-size: 20rpx;
  border-radius: 6rpx;
  padding: 2rpx 8rpx;
}
.cart-meta {
  font-size: 22rpx;
  color: #ff4d4f;
  margin-bottom: 6rpx;
}
.cart-comment { color: #888; margin-right: 12rpx; }
.cart-limit { color: #ff4d4f; }
.cart-price-row {
  display: flex;
  align-items: baseline;
  gap: 10rpx;
  margin-bottom: 8rpx;
}
.cart-price {
  color: #ff5000;
  font-size: 32rpx;
  font-weight: bold;
}
.cart-origin-price {
  color: #bbb;
  font-size: 20rpx;
  text-decoration: line-through;
}
.cart-quantity-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-top: 8rpx;
}
.quantity-box {
  display: flex;
  align-items: center;
}
.quantity-btn {
  width: 56rpx;
  height: 56rpx;
  line-height: 56rpx;
  font-size: 36rpx;
  border: none;
  background: #fff3e0;
  color: #ff5000;
  border-radius: 50%;
  margin: 0 12rpx;
  padding: 0;
  box-shadow: 0 2rpx 8rpx #ffe5d0;
  transition: background 0.2s;
}
.quantity-btn:active {
  background: #ffd6a0;
}
.quantity-num {
  min-width: 48rpx;
  text-align: center;
  font-size: 32rpx;
  color: #333;
}
.del-btn {
  background: #fff0f0;
  color: #ff4d4f;
  border-radius: 50%;
  border: 1rpx solid #ff4d4f;
  margin-left: 12rpx;
  width: 32rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.del-icon {
  color: #ff4d4f;
  font-size: 22rpx;
  font-weight: bold;
}
.cart-bottom-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 12rpx 10rpx;
  box-shadow: 0 -2rpx 12rpx rgba(0,0,0,0.08);
  z-index: 99;
  flex-wrap: wrap;
}
.cart-bottom-btns {
  display: flex;
  gap: 10rpx;
  margin-left: auto;
}
.select-text {
  font-size: 28rpx;
  color: #333;
}
.total-label {
  font-size: 26rpx;
  color: #666;
}
.total-price {
  color: #ff5000;
  font-size: 32rpx;
  font-weight: bold;
}
.checkout-btn {
  background: linear-gradient(90deg, #ff9000 0%, #ff5000 100%);
  color: #fff;
  border-radius: 22rpx;
  font-size: 22rpx;
  padding: 0 22rpx;
  height: 40rpx;
  min-width: 90rpx;
  margin: 0;
  border: none;
}
.empty-cart, .cart-empty {
  text-align: center;
  padding: 120rpx 40rpx 60rpx;
  background: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
}
.empty-img {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 30rpx;
  opacity: 0.6;
}
.empty-tip {
  color: #999;
  font-size: 30rpx;
  margin-bottom: 40rpx;
  line-height: 1.5;
}
.go-shopping-btn {
  background: linear-gradient(135deg, #ff9000 0%, #ff5000 100%);
  color: #fff;
  border: none;
  border-radius: 35rpx;
  padding: 0 50rpx;
  height: 70rpx;
  font-size: 28rpx;
  font-weight: 500;
  box-shadow: 0 4rpx 12rpx rgba(255, 80, 0, 0.3);
}
.cart-loading-mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255,255,255,0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #ff5000;
}
.batch-delete-btn, .clear-cart-btn {
  background: #fff;
  color: #ff4d4f;
  border: 1rpx solid #ff4d4f;
  border-radius: 20rpx;
  font-size: 22rpx;
  padding: 0 16rpx;
  height: 40rpx;
  min-width: 80rpx;
  margin: 0;
}
.batch-delete-btn:active, .clear-cart-btn:active {
  background: #ffeaea;
}
.cart-bottom-bar-simple {
  position: fixed;
  left: 0;
  bottom: 100rpx; /* 抬高到TabBar上方 */
  width: 100vw;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10rpx 0;
  box-shadow: 0 -2rpx 12rpx rgba(0,0,0,0.08);
  z-index: 9999;
}
.cart-btn {
  flex: 1;
  margin: 0 8rpx;
  height: 44rpx;
  font-size: 24rpx;
  border-radius: 22rpx;
  border: none;
  font-weight: bold;
}
.batch-delete-btn {
  background: #fff0f0;
  color: #ff4d4f;
}
.clear-cart-btn {
  background: #f7f7f7;
  color: #ff9000;
}
.checkout-btn {
  background: linear-gradient(90deg, #ff9000 0%, #ff5000 100%);
  color: #fff;
}
.custom-checkbox {
  width: 44rpx;
  height: 44rpx;
  min-width: 44rpx;
  min-height: 44rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 18rpx;
  margin-top: 30rpx;
  transition: border-color 0.2s, background 0.2s;
}
.checkbox-svg {
  display: block;
}
.custom-checkbox.checked {
  border-color: #ff5000;
  background: #ff5000;
  box-shadow: 0 0 0 6rpx #ff500033;
}
.iconfont.icon-checked {
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
}
.cart-item-label {
  display: flex;
  align-items: flex-start;
  width: 100%;
  cursor: pointer;
  padding-top: 6rpx;
  padding-bottom: 6rpx;
}
.cart-total {
  font-size: 28rpx;
  color: #333;
  margin-right: 18rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.cart-total-price {
  color: #ff5000;
  font-size: 32rpx;
  margin-left: 4rpx;
}
.btn-group {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  margin-top: 32rpx;
  align-items: center;
}
.cart-login-btn {
  width: 80%;
  margin: 0 auto;
  font-size: 32rpx;
  border-radius: 32rpx;
  padding: 18rpx 0;
  background: #fff;
  color: #ff9000;
  border: 2rpx solid #ff9000;
  font-weight: bold;
  transition: background 0.2s, color 0.2s;
}
.cart-login-btn.primary {
  background: linear-gradient(90deg, #ff5000, #ff9000);
  color: #fff;
  border: none;
}
.cart-login-btn:active {
  background: #fff7e6;
}

/* 删除按钮样式 */
.cart-item-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  margin-bottom: 2rpx;
  border-radius: 12rpx;
  overflow: hidden;
}

.delete-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 120rpx;
  background: #ff4d4f;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.delete-text {
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
}

.cart-item-label {
  flex: 1;
  display: flex;
  align-items: flex-start;
  width: 100%;
  cursor: pointer;
  padding: 20rpx;
  padding-right: 140rpx; /* 为删除按钮留出空间 */
  box-sizing: border-box;
}
</style> 